<!DOCTYPE html>
<html>
<head>
  <title>Tile Engine</title>
  <style>
  canvas {
    background: black;
  }
  </style>
  <script type="text/javascript" src="../../../kontra.js"></script>
</head>
<body>
  <canvas width="600" height="600"></canvas>
  <p>M - Mute/Unmute</p>
  <script id="code">
  /**
   * ATTRIBUTION:
   * terrain.png - [LPC Tile Atlas]{@link http://opengameart.org/content/lpc-tile-atlas}. See
   *               Attribution.txt for full list of authors.
   * man.png - [LPC White Beard]{@link http://opengameart.org/content/lpc-white-beard}. Stephen
   *           Challener (Redshrike), Johannes Sjölund, and Carlo Enrico Victoria (Nemisys)
   * chicken_eat.png - [LPC style farm animals]{@link https://opengameart.org/content/lpc-style-farm-animals}. daneeklu
   */
  let { canvas, context } = kontra.init();

  kontra.initKeys();

  kontra.setAudioPath('../../audio/');

  kontra.load('terrain.json', 'man.png', 'chicken_eat.png', 'terrain.png', ['Digital_Forest.mp3', 'Digital_Forest.mp3']).then(function() {
    var terrain = kontra.dataAssets.terrain;

    var worldWidth = terrain.width * terrain.tilewidth;
    var worldHeight = terrain.height * terrain.tileheight;

    // setup tile engine
    window.tileEngine = kontra.TileEngine(terrain);
    tileEngine.sx = worldWidth / 2 - canvas.width / 2,
    tileEngine.sy = worldHeight - canvas.height

    // create the walking man sprite sheet and animations
    var spritesheet = kontra.SpriteSheet({
      image: kontra.imageAssets.man,
      frameWidth: 64,
      frameHeight: 64,
      animations: {
        walk_up: {
          frames: '105..112',  // frames 105 through 112
          frameRate: 12
        },
        walk_left: {
          frames: '118..125',
          frameRate: 12
        },
        walk_down: {
          frames: '131..138',
          frameRate: 12
        },
        walk_right: {
          frames: '144..151',
          frameRate: 12
        }
      }
    });

    // create the player
    window.player = kontra.Sprite({
      x: tileEngine.sx + canvas.width / 2 - 32,
      y: tileEngine.sy + canvas.height / 2 - 32,
      speed: 3,
      animations: spritesheet.animations,
      update: function() {
        var collisionBox = {
          y: this.y + 43,
          x: this.x + 28,
          width: 6,
          height: 22
        };

        if (kontra.keyPressed('arrowup')) {
          this.playAnimation('walk_up');
          collisionBox.y -= this.speed;

          // don't move the player if he collides with the collision layer
          if (tileEngine.layerCollidesWith('collision', collisionBox) || kontra.collides(chicken, collisionBox)) {
            return;
          }

          this.y -= this.speed;
          this.advance();

          // move the camera and the player together so long as he doesn't reach the edge
          if (this.y < worldHeight - canvas.height / 2) {
            tileEngine.sy -= this.speed;
          }
        }
        else if (kontra.keyPressed('arrowdown')) {
          this.playAnimation('walk_down');
          collisionBox.y += this.speed;

          // don't move the player if he collides with the collision layer
          if (tileEngine.layerCollidesWith('collision', collisionBox) || kontra.collides(chicken, collisionBox)) {
            return;
          }

          this.y += this.speed;
          this.advance();

          // move the camera and the player together so long as he doesn't reach the edge
          if (this.y > canvas.height / 2) {
            tileEngine.sy += this.speed;
          }
        }
        else if (kontra.keyPressed('arrowleft')) {
          this.playAnimation('walk_left');
          collisionBox.x -= this.speed;

          // don't move the player if he collides with the collision layer
          if (tileEngine.layerCollidesWith('collision', collisionBox) || kontra.collides(chicken, collisionBox)) {
            return;
          }

          this.x -= this.speed;
          this.advance();

          // move the camera and the player together so long as he doesn't reach the edge
          if (this.x < worldWidth - canvas.width / 2) {
            tileEngine.sx -= this.speed;
          }
        }
        else if (kontra.keyPressed('arrowright')) {
          this.playAnimation('walk_right');
          collisionBox.x += this.speed;

          // don't move the player if he collides with the collision layer
          if (tileEngine.layerCollidesWith('collision', collisionBox) || kontra.collides(chicken, collisionBox)) {
            return;
          }

          this.x += this.speed;
          this.advance();

          // move the camera and the player together so long as he doesn't reach the edge
          if (this.x > canvas.width / 2) {
            tileEngine.sx += this.speed;
          }
        }
      }
    });
    tileEngine.add(player);

    // clamp player position in the game world
    player.position.clamp(0, 0, worldWidth - player.width, worldHeight - player.height);

    // create the chicken eating sprite sheet and animations
    var chickenSpritesheet = kontra.SpriteSheet({
      image: kontra.imageAssets.chicken_eat,
      frameWidth: 32,
      frameHeight: 32,
      animations: {
        eat_right: {
          frames: [12,12,12,12,12,'12..15',14,15,14,15,14,13,12],
          frameRate: 6
        }
      }
    });

    // this sprite should move around with the tileEngine camera
    window.chicken = kontra.Sprite({
      x: tileEngine.sx + 400,
      y: tileEngine.sy + 50,
      count: 0,
      animations: chickenSpritesheet.animations
    });
    chicken.playAnimation('eat_right');
    tileEngine.add(chicken);

    var loop = kontra.GameLoop({
      update: function() {
        player.update();
        chicken.update();
      },
      render: function() {
        tileEngine.render();

        // draw the topmost layer above the payer so he will go behind the trees
        tileEngine.renderLayer('decoration_edges');
      }
    });

    kontra.onKey('m', function() {
      kontra.audioAssets.Digital_Forest.play();
      kontra.audioAssets.Digital_Forest.muted = !kontra.audioAssets.Digital_Forest.muted;
    });

    kontra.audioAssets.Digital_Forest.loop = true;
    kontra.audioAssets.Digital_Forest.muted = true;
    kontra.audioAssets.Digital_Forest.volume = 0.5;
    loop.start();
  });
  </script>
</body>
</html>
